<!--工艺流程明细组件-->
<template>
    <div>

        <el-form :model="model" label-width="120px" class="demo-ruleForm page-form">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="工艺路线编号" prop="RouteCode">
                        <el-input v-model="model.RouteCode" :readonly="true"></el-input>
                    </el-form-item>

                    <el-form-item label="工艺路线说明">
                        <el-input v-model="model.RouteDesc" :readonly="true"></el-input>
                    </el-form-item>

                </el-col>

                <el-col :span="8">

                    <el-form-item label="工艺路线名称" prop="RouteName">
                        <el-input v-model="model.RouteName" :readonly="true"></el-input>
                    </el-form-item>

                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" :readonly="true"></el-input>
                    </el-form-item>

                </el-col>

                <el-col :span="8">

                    <el-form-item label="是否启用" prop="EnableFlag">
                        <el-radio-group v-model="model.EnableFlag" :disabled="true">
                            <el-radio label="Y">是</el-radio>
                            <el-radio label="N">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                </el-col>

            </el-row>

        </el-form>
        <el-tabs v-model="activeName">
            <el-tab-pane label="组成工序" name="Process">

                <el-table :data="ProcessData" ref="ProcessForm" v-loading="ProcessDataisLoading" height="360">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="OrderNum" label="序号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ProcessCode" label="工序编码" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ProcessName" label="工序名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="NextProcessName" label="下一个工序名称"
                        :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="LinkType" label="与下一道工序关系" :show-overflow-tooltip="true"></el-table-column>

                    <el-table-column prop="KeyFlag" label="关键工序" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.KeyFlag === 'Y'">是</el-tag>
                            <el-tag type="warning" v-else>否</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="DefaultPreTime" label="准备时间" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="DefaultSufTime" label="等待时间" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ColorCode" label="甘特图显示颜色" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-color-picker v-model="scope.row.ColorCode" :disabled="true"></el-color-picker>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                </el-table>

                <!--<Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                    :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                    :TotalCount="pageDomain.TotalCount" />-->

            </el-tab-pane>
            <el-tab-pane label="关联产品" name="Product">

                <el-table :data="ProductData" ref="ProductForm" v-loading="ProductDataisLoading" height="360">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="ItemCode" label="产品物料编码" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ItemName" label="产品物料名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Specification" label="规格型号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                </el-table>

                <!--<Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                    :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                    :TotalCount="pageDomain.TotalCount" />-->

            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
//import Pagination from '@/components/Pagination.vue'
export default {
    components: {
        //Pagination
    },
    props: {
        model: {
            require: true,
            type: Object,

        },
    },
    data() {
        return {
            activeName: 'Process',
            /*pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0,
            },*/
            RouteCode: '',
            ProcessData: [],
            ProductData: [],
            ProcessDataisLoading: false,
            ProductDataisLoading: false,
        }
    },
    //当组件被创建时触发
    created() {
            this.GetProRoutebyId(this.model.Id);    //根据ProRoute的Id查询ProRouteProcess（工艺组成表（工艺流程附加表））子表数据导入进表格中
            this.GetProRouteProductbyId(this.model.Id)      //根据ProRoute的Id查询ProRouteProduct（产品制程（工艺流程附加表））子表数据导入进表格中
    },
    methods: {
        //根据工艺流程编号获取工艺组成表（工艺流程附加表）方法
        GetProRoutebyId(Id) {
            this.ProcessDataisLoading = true;
            this.$http.get('/api/ProRoute/GetProRoutebyId', {
                params: {
                    RouteId: Id
                }
            })
                .then(res => {
                    console.log(res)
                    this.ProcessData = res.Data;
                    this.ProcessDataisLoading = false;
                })
        },
        //根据工艺流程编号获取产品制程（工艺流程附加表）方法
        GetProRouteProductbyId(Id) {
            this.ProductDataisLoading = true;
            this.$http.get('/api/ProRoute/GetProRouteProductbyId', {
                params: {
                    RouteId: Id
                }
            })
                .then(res => {
                    console.log(res)
                    this.ProductData = res.Data;
                    this.ProductDataisLoading = false;
                })
        }
        
    }
}
</script>
<style scoped></style>